<template>
  <div class="groupProfile">
    <div class="customer-top">
      <div class="customer-logo" v-show="showLogo">
        <img src="../../../../static/img/groupUpdata.png">
      </div>
      <div class="new-input" v-clickoutside="handleClickOutSide">
        <el-row>
          <el-col :span="inputNum" :offset="inputSetNum" style="position: relative;">
            <el-input id="searchInput" :placeholder="tipsValue" v-model.trim="search_value" style="width: 100%"
                      class="input-with-select"
                      @focus="showPopCard"
                      @keyup.enter.native="search(search_value)"
                      >
              <template slot="prepend">{{$t('search.Group')}}</template>
              <!--<el-select v-model="butValue" slot="prepend" placeholder="请选择"  @change="switchBtn(butValue)">-->
              <!--<el-option v-for="item in inputSelOpts" :key="item.value" :label="item.label" :value="item.value" class="customer-profile-select"></el-option>-->
              <!--</el-select>-->
              <i slot="suffix" class="el-input__icon el-icon-close clear-icon" @click="clearValue"></i>
              <el-button slot="append" icon="el-icon-search"
                         @click="search(search_value)"></el-button>
            </el-input>
            <div class="popover-card" v-show="showPopoverCard">
              <div class="search-card">
                <!--测试模糊搜索所用-->
                <!--<div class="search-history match-key">-->
                  <!--<div class="search-title">-->
                    <!--<span>{{$t('search.fuzzySearch')}}</span>-->
                  <!--</div>-->
                  <!--<div class="match-content">-->
                    <!--<li v-for="value in matchKeyData" :key="value" style="list-style: none; cursor: pointer;"-->
                        <!--@click="keySearch(value.customer_name, value.customer)">{{value.customer_name}}:{{value.customer}}-->
                    <!--</li>-->
                  <!--</div>-->
                <!--</div>-->
                <!--测试模糊搜索所用-->
                <div class="search-history">
                  <div class="search-title">
                    <span>{{$t("search.SearchHistory")}}</span>
                    <span class="clear-history">
                     <i class="icon iconfont icon-shanchu"></i>
                     <span class="clearAll" @click="clearAll(0)"
                           style="cursor: pointer">{{$t("search.clearAll")}}</span>
                  </span>
                  </div>
                  <div class="history-tag">
                    <div class="customer-history" v-show="this.searchHistoryA.toString() !== ''">
                      <el-tag closable v-for="(item, index) in searchHistoryA" :key="item"
                              @click.native="jumpHistory(item)"
                              @close.stop="clearTag(item)" class="tag-item" style="cursor: pointer">
                        <span>{{item}}</span>
                      </el-tag>
                    </div>
                  </div>
                </div>
                <div class="hot-word"></div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div>
      <!--v-if="resStatus === 200"-->
      <el-row type="flex" justify="space-between" class="header-title" v-if="resStatus === 200">
        <el-col :span="3">
          <div class="item-name">
            <span>{{$t('search.AccountName')}}</span>
          </div>
        </el-col>
        <el-col :span="4" :offset="1">
          <div class="item-category">
            <span>{{$t('search.Category')}}</span>
          </div>
        </el-col>
        <el-col :span="3" :offset="2">
          <div class="item-account" style="margin-left: -15px;">
            <span>{{$t('search.Account')}}</span>
          </div>
        </el-col>
        <el-col :span="3" :offset="2">
          <div class="item-machine" style="margin-left: -15px;">
            <span>{{$t('search.Machine1')}}</span>
          </div>
        </el-col>
        <el-col :span="3" :offset="3">
          <div class="item-claim" style="margin-left: -20px;">
            <span>{{$t('search.Claim')}}</span>
          </div>
        </el-col>
      </el-row>
      <div class="customer-info" id="customer-info" @scroll="isBottom" v-if="infoFlag === true" v-loading="infoLoading"
           element-loading-text="loading...">
        <div v-if="resStatus === 200">
          <!--<newCustomerInfo :items="infoItem" v-if="showBtn ===0"></newCustomerInfo>-->
          <customerInfo :items="infoItem" :searchValue="search_value"></customerInfo>
        </div>
        <!--<div class="tips" v-if="resStatus === ''"><p>{{$t("search.NoData")}}...</p></div>-->
        <div class="tips" v-if="resStatus === ''">
          <p><img src="../../../../static/img/noData.png" alt=""></p>
        </div>
      </div>
    </div>
    <div class="load-div" v-loading="showLoading"></div>
  </div>
</template>

<script>
  import customerInfo from '../components/customerInfo.vue'
  //  import newCustomerInfo from './newCustomerInfo'
  import {getUsername, getPageId, getPageName, getUrl, setKeyword, setbutValue} from "../../../utils/auth";
  import {mapGetters} from "vuex";
  import clickoutside from '../components/clickoutside'
  export default {
    name: 'groupProfile',
    data() {
      return {
        showPopoverCard: false,
        once: null,
        matchKeyData: [],
        // 改版后data
        infoFlag: false, // 用来判断是否调用了search也就是是否点击了搜索，以解决组件滚动条问题
        inputSetNum: 4,
        inputNum: 16,
        inputValue: '',
        inputSelOpts: [
          {
            value: 0,
            label: 'Customer'
          },
          {
            value: 1,
            label: 'Machine'
          }
        ],
        // 搜索后的高级搜索按钮变化的样式
        afterCheck: false,
        // selectValue: 'Customer',

        snData: {
          flag: '',
          count: 1,
          rows: [],
          pageNum: 1
        },
        showLoading: false,
        infoLoading: false,
        showHistoryTag: false,
        searchHistoryA: [],
        searchHistoryB: [],
        tipsValue: 'Group',
        showMachine: false,
        showBtn: 2,
        butValue: 9,
        search_value: '',
        showLogo: true,
        infoItem: [],
        // flag
        flag: '',
        bpNumber: '',
        accountName: '',
        resStatus: '',
        pageNum: 1
      }
    },
    components: {
      customerInfo,
    },
    computed: {
      ...mapGetters(['language'])
    },
    watch: {
      language(n) {
        this.tipsValue = this.$t('search.PleaseholdThree')
        const _this = this
//         if (n === 'en') {
//           this.tipsValue = this.$t('search.PleaseholdThree')
//         } else if (n === 'zh') {
//           this.tipsValue = this.$t('search.PleaseholdThree')
//         }
      }
    },
    methods: {
      handleClickOutSide() {
        // this.showPopoverCard.bp = false
        this.showPopoverCard = false
      },
      showPopCard() {
        // this.showPopoverCard.bp = true
        if(this.searchHistoryA.length!==0){
          this.showPopoverCard = true
        }
      },
      // hidePopCard() {
      //   setTimeout(() => {this.showPopoverCard = false}, 300)
      // },
      clearTag(item) {
        var _this = this
        this.axios.post('/search/delOneSearchHistory.do', {
          'keyword': item,
          'flag': 9
        }).then(response => {
//          console.log('清除成功')
//          console.log(response)
          this.searchHistory()
        })
      },
      clearAll(n) {
        var _this = this
        this.axios.post('/search/delMoreSearchHistory.do', {
          'flag': 9
        }).then(response => {
          this.searchHistory()
        })
      },
      jumpHistory(item) {
        this.search_value = item
        this.search()
      },
      searchHistory() {
        var _this = this
        this.axios.post('/user/get_keyword.do', {
          'flag': 9
        }).then(response => {
          if (response.status === 200) {
//            console.log('搜索历史')
//            console.log(response)
            let resData = response.data.data
//            console.log(resData,'resDataresData');
            if (resData.length != 0) {
              _this.showHistoryTag = true
            }
            _this.searchHistoryA = resData
          }
        })
      },
      searchAction(key) {
        var _this = this;
        _this.key = key;
        setKeyword(_this.search_value);
        setbutValue(_this.butValue);
        console.log(key);
        Avatar.push([
          'track',
          [
            'category',
            'loginSuccess',
            'label',
            {
              url: getUrl(),
              userName: getUsername(),
              pageID: getPageName(),
              childName: _this.key
            },
            0
          ]
        ]);
      },
      open() {
        this.$message({
          message: this.$t('search.Nodata'),
          type: 'warning',
          showClose: true,
          duration: 2000
        });
      },
      clearValue() {
        this.search_value = ''
      },
      switchBtn() {
        this.pageNum = 1;
        this.infoItem = [];
        this.resStatus = '1';
        this.snData.flag = ''

        this.showMachine = false
        this.tipsValue = this.$t('search.PleaseholdThree')
        this.searchHistory()
      },
      search() {
        document.getElementById('searchInput').blur() // 使其失去焦点，让历史框隐藏
        this.showPopoverCard = false
        this.infoLoading = true
        this.switchBtn()
//        this.resStatus = ''
        var _this = this
        if (this.search_value !== '') {
          this.axios.post('/groupSearch/getSearchLikeValues', {
            searchValue: _this.search_value,
            page: 1,
            pageSize: 10,
            flag: 9,
            username:getUsername()
          }).then(response => {
            if (response.status === 200) {
              _this.showLogo = false
              this.inputSetNum = 0
              this.inputNum = 18
              _this.afterCheck = true
              _this.infoFlag = true
//
              var resData = response.data.data
              _this.resStatus = resData.rows.length === 0 ? '' : response.status
              _this.infoItem = resData.rows.map(function (item) {
                return item
              })
              this.infoLoading = false;
              this.searchHistory()
            }
          }).catch(error => {
            _this.infoLoading = false;
          })
        } else {
          this.infoLoading = false
        }
//
//        _this.showLogo = false
//        this.inputSetNum = 0
//        this.inputNum = 18
//        _this.afterCheck = true
//        _this.infoFlag = true
//        _this.infoItem=[
//          {
//            machine: 8208,
//            name: "IBM",
//            claim: 3873,
//            category: "Customer",
//            account: "ID 4541649/89"
//          },
//          {
//            machine: 182776,
//            name: "IBM",
//            claim: 56777,
//            category: "Group",
//            account: "207"
//          },
//        ]
//        this.infoLoading = false;
      },
      isBottom() {
        let customerInfo = document.getElementById('customer-info')
        if (customerInfo.scrollHeight > customerInfo.clientHeight) {
          if (customerInfo.scrollHeight - customerInfo.scrollTop - 0.5 <= customerInfo.clientHeight) {
            this.showLoading = true;
            this.pageNum += 1
            var _this = this

            this.axios.post('/groupSearch/getSearchLikeValues', {
              page: _this.pageNum,
              searchValue: _this.search_value,
              pageSize: 10,
              username:getUsername()
            }).then(response => {
              if (response.status === 200) {
                _this.showLogo = false
                _this.afterCheck = true
                var resData = response.data.data
//                console.log(resData,'isBottom');
                _this.showLoading = false
                if (resData.rows.length != 0) {
                  var addItem = resData.rows.map(function (item) {
                    return item
                  })
                  _this.infoItem = _this.infoItem.concat(addItem)
                } else {
                  _this.open()
                  console.log('再无更多数据')
                }
              }
            })

          }
        } else {
//          console.log('高度问题')
        }
      },
      matchKey(value) {
        const _this = this
        clearTimeout(this.once)
        this.once = setTimeout(function () {
          _this.axios.post('/search/matchKeyQry.do', {search_value: value}).then(res => {
//            console.log(res.data.data,'matchKey');
            _this.matchKeyData = res.data.data.rows
            // _this.matchKeyData = []
            // _this.matchKeyData = _this.matchKeyData.concat(res.data.data.rows)
          })
        }, 500)
      },
      keySearch(name, value) {
        this.search_value = value === '' ? name : value;
        this.search()
      }
    },
    mounted() {
      // 由于修改信息检索介绍页排版导致跳转函数失效，注释

      this.tipsValue = this.$t('search.PleaseholdThree');

      this.searchHistory()
    },
    directives: {
      'clickoutside': clickoutside
    }
  }
</script>

<style lang="scss" scoped>
  $text-center: center;
  $cursor-point: pointer;
  .filter-but {
    /*background-color: #f00;*/
    display: inline-block;
    /*width: 50px;*/
    width: 130px;
    font-size: 15px;
    height: 30px;
    cursor: $cursor-point;
    /*margin-left: 15px;*/
    &:hover {
      color: #1e90ff;
      /*font-weight: bold;*/
    }
  }

  .groupProfile {
    margin: 0 20px;
    .customer-top {
      // overflow: hidden; // 激活BFC解决Bug
      .advanced-filter-btn {
        position: absolute;
        right: 0;
        /*width: 200px;*/
        height: 50px;
        margin-top: 20px;
        margin-right: 20px;
      }
      .btn-after {
        margin-right: 46px;
        margin-top: 30px;
        height: 56px;
        z-index: 500;
      }
      .el-btn {
        height: 56px !important;
      }
      .customer-logo {
        margin-top: 45px;
        padding-bottom: 12px;
        text-align: $text-center;
      }
      .new-input {
        margin-top: 30px;
        position: relative;
      }
      .customer-button {
        text-align: $text-center;
        margin-top: 20px;
        /*margin-left: calc(100% - 65vw);*/
        .el-radio-button {
          margin-right: 10px;
          margin-left: 10px;
        }
        .filter-but {
          /*background-color: #f00;*/
          display: inline-block;
          /*width: 50px;*/
          width: 130px;
          font-size: 15px;
          height: 30px;
          cursor: $cursor-point;
          /*margin-left: 15px;*/
          &:hover {
            color: #1e90ff;
            /*font-weight: bold;*/
          }
        }
      }
      .customer-search {
        padding-top: 10px;
        /*text-align: center;*/
        .el-input {
          width: 750px;
        }
        .clear-icon {
          cursor: $cursor-point;
        }
        .clear-icon:hover {
          color: #409eff;
        }
      }
      .customer-history, .machine-history {
        padding-top: 5px;
        /*text-align: center;*/
        .sh-tag {
          display: inline-block;
          width: 120px;
          color: #afafaf;
        }
        .el-tag {
          margin: 0 20px 0 0;
          cursor: $cursor-point;
        }
        .clearAll {
          margin-left: 3vw;
          color: #409eff;
          cursor: $cursor-point;
          &:hover {
            font-weight: bold;
          }
        }
      }
    }
    .machine-list {
      padding-bottom: 10px;
    }
    .header-title {
      margin-left: 28px;
      margin-top: 52px;
      margin-bottom: 14px;
      span {
        color: #939cad;
        font: bold 15px Helvetica;
      }
    }
    .customer-info, .customer-info2 {
      margin-top: 10px;
      /*height: 55vh;*/
      height: calc(70vh - 65px);
      /*height: calc(63vh - 65px);*/
      overflow: auto;
      .tips {
        width: 100%;
        text-align: center;
        /*padding-top: 10vh;*/
        padding-top: 140px;
        font-size: 20px;
        font-weight: bold;
        color: #99a9bf;
      }
    }
    .load-div {
      position: absolute;
      left: 50%;
      top: 50%;
    }
  }

  // 搜索历史弹出框样式
  .popover-card {
    /*text-align: center;*/
    position: absolute;
    z-index: 2;
    background-color: #fff;
    top: 70px;
    left: 200px;
    width: 610px;
    border: 1px solid #e6ebf5;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    display: block;
  }

  .popover-card:before {
    content: "";
    border: 5px solid #fff;
    border-left-color: transparent;
    border-right-color: transparent;
    border-top-color: transparent;
    width: 0;
    height: 0;
    position: relative;
    left: 50%;
    top: -22px;
  }

  .search-card {
    /*border: 1px solid #ccc;*/
    padding: 25px 20px;
    .search-history {
      .search-title {
        color: #939cad;
        font: 18px Helvetica, Regular;
        .clearAll:hover {
          /*color: #f33;*/
        }
      }
      .clear-history {
        float: right;
      }
      .history-tag {
        /*width: 580px;*/
        width: 100%;
        /*display: flex;*/
        margin-top: 15px;
        .tag-item {
          background-color: #e8f8fc;
          color: #3dc1df;
          font: 16px Helvetica, Regular;
          display: inline-block;
          /*width: calc(50% - 5px);*/
          width: calc(50% - 20px);
          height: 45px;
          border: 1px solid #ebf8fb;
          border-radius: 6px;
          margin-bottom: 10px;
          /*text-align: center;*/
          line-height: 45px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          span {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: inline-block;
            max-width: 200px;
            vertical-align: bottom;
          }
        }
        .tag-item:nth-child(odd) {
          margin-right: 33px;
        }
        .tag-item:nth-child(even) {
          margin-left: 5px;
          margin-right: 0;
        }

      }
    }
  }
</style>
